<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Direct WebSocket Test</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
        .status { padding: 10px; margin-bottom: 10px; border-radius: 3px; }
        .connected { background-color: #d4edda; color: #155724; }
        .disconnected { background-color: #f8d7da; color: #721c24; }
        #messages { height: 300px; overflow-y: auto; border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; }
        button { padding: 10px 15px; background-color: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer; }
    </style>
</head>
<body>
    <h1>Direct WebSocket Test (Bypassing Proxy)</h1>
    <div class="status disconnected" id="status">Disconnected</div>
    <div id="messages"></div>
    <button id="connectBtn">Connect Directly to Backend</button>

    <script>
        const statusElement = document.getElementById('status');
        const messagesElement = document.getElementById('messages');
        const connectBtn = document.getElementById('connectBtn');
        let socket = null;

        function updateStatus(isConnected) {
            if (isConnected) {
                statusElement.className = 'status connected';
                statusElement.textContent = 'Connected';
                connectBtn.disabled = true;
            } else {
                statusElement.className = 'status disconnected';
                statusElement.textContent = 'Disconnected';
                connectBtn.disabled = false;
            }
        }

        function appendMessage(message) {
            const messageElement = document.createElement('div');
            messageElement.textContent = message;
            messagesElement.appendChild(messageElement);
            messagesElement.scrollTop = messagesElement.scrollHeight;
        }

        connectBtn.addEventListener('click', () => {
            if (socket && socket.readyState === WebSocket.OPEN) {
                appendMessage('Already connected');
                return;
            }

            // 生成随机peerId
            const peerId = 'test-' + Math.random().toString(36).substring(2, 10);
            // 直接连接后端WebSocket，不通过代理
            //const wsUrl = `ws://192.168.50.177:3000/peerjs-server/peerjs?key=default-api-key&token=default-api-token&id=${peerId}`;
            const wsUrl = `ws://192.168.50.177:3000/peerjs-server/peerjs?key=peerjs&id={%22id%22:%22${peerId}%22}&token=7h4ttneq76v&version=1.4.7`;


            appendMessage(`Connecting to: ${wsUrl}`);
            socket = new WebSocket(wsUrl);

            socket.onopen = () => {
                updateStatus(true);
                appendMessage('Connected to backend WebSocket server');
            };

            socket.onmessage = (event) => {
                appendMessage(`Received: ${event.data}`);
            };

            socket.onclose = (event) => {
                updateStatus(false);
                appendMessage(`Disconnected. Code: ${event.code}, Reason: ${event.reason}`);
            };

            socket.onerror = (error) => {
                appendMessage(`Error: ${error.message}`);
                updateStatus(false);
            };
        });
    </script>
</body>
</html>